<!-- 用户协议弹窗 -->
<template>
  <view class="protocol-popup">
    <van-popup :show="showPopup" position="bottom">
      <view class="hd-title siyuan-medium">请阅读并同意以下条款</view>
      <van-icon
        name="cross"
        size="22px"
        color="#000000"
        class="cross-icon"
        @click="btnClick('close')"
      />
      <view class="agree d-flex">
        <button @click="btnClick('openAgree')">《用户协议》</button>
        和
        <button @tap="handleOpenPrivacyContract">《隐私政策》</button>
      </view>
      <view class="accept">
        <button class="dialog-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
          <text class="siyuan-medium">同意并继续</text>
          <text class="intel-one-mono-medium">Accept</text>
        </button>
      </view>
    </van-popup>
  </view>
</template>

<script setup>
const props = defineProps({
  showPopup: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["update:showPopup", "changeAgree", "clickLogin"]);
function getPhoneNumber(e) {
  if (e) {
    emit("clickLogin", e);
    emit("changeAgree", true);
    emit("update:showPopup", false);
  }
}
// 打开隐私政策
const handleOpenPrivacyContract = () => {
  // 打开隐私协议页面
  wx.openPrivacyContract({
    success: () => {}, // 打开成功
    fail: () => {
      wx.showToast({
        title: "隐私政策打开失败",
        icon: "error",
        duration: 2000,
      });
    }, // 打开失败
  });
};

// 打开用户协议
const btnClick = type => {
  switch (type) {
    case "openAgree":
      uni.navigateTo({
        url: "/pages/personal/agreement",
      });
      break;
    case "close":
      console.log("关闭", emit);
      emit("update:showPopup", false);
      break;
  }
};
</script>

<style lang="scss" scoped>
.protocol-popup {
  font-size: 26rpx;
  text-align: center;
  line-height: 32rpx;
  .hd-title {
    padding: 34rpx 0 60rpx;
  }
  .cross-icon {
    position: absolute;
    top: 30rpx;
    right: 54rpx;
  }
  .accept {
    margin: 56rpx 88rpx 98rpx;
    padding: 6rpx 0 4rpx;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    .dialog-btn {
      height: 62rpx;
      background-color: transparent;
      border: none;
      font-size: 26rpx;
      line-height: 62rpx;
      text:first-child {
        margin-right: 100rpx;
      }
    }
  }
  .agree {
    align-items: center;
    justify-content: center;
    button {
      height: 26rpx;
      margin: 0;
      padding: 0;
      background-color: transparent;
      line-height: 26rpx;
      font-size: 26rpx;
    }
  }
}
</style>
